<template>
  <page-scroll :footer="true">

    <template #header>
      <gltitle :title="title"
               :is_name="true"
               :is_back="true"
               :is_lang="false"
               :is_kf="false"
      >
        <template #right>
          <img class="icon-record"
               @click="$router.push('/invest/record')"
               src="@/assets/images/public/icon-record-white.png" alt="">
        </template>
      </gltitle>
    </template>
    <template #content>
      <div class="container">
        <AssetsCard :info="assetsInfo"/>
        <!--投资计算器-->
        <InvestCompute/>
        <div class="list-box">
          <div class="cname">
            <div>{{ $t("new.doc16") }}</div>
          </div>
          <div class="w-full" style="height: 2px;background: #38d390"></div>
          <div class="list">
            <div class="item" v-for="(item,index) in dataList" :key="index">
              <div class="head">
                <img :src="item.bannerList[0] || defaultBanner" alt="">
                <div class="head-content">
                  <div class="title">{{ item.name }}</div>
                  <div class="buy-btn"
                       @click="path_url(`/invest/view?id=${item.productId}&balance=${assetsInfo.electronBalance}`)">
                    {{ $t('new.doc17') }}
                  </div>
                </div>
              </div>
              <div class="info-list">
                <div class="info">
                  <div class="name">{{ $t('page4.doc123') }}</div>
                  <div class="value active">{{ 100 + item.rate * item.days }}%</div>
                </div>
                <div class="info">
                  <div class="name">{{ $t('new.doc18') }}</div>
                  <div class="value">{{ item.min }} USDT</div>
                </div>
                <div class="info">
                  <div class="name">{{ $t('new.doc19') }}</div>
                  <div class="value">{{ $t('page3.doc36', {i1: item.days}) }}</div>
                </div>
              </div>

              <div class="but" v-if="item.financialPromotionCountdown > 0">
                <button>{{ $t('new.doc57') }}：
                  <van-count-down :time="item.financialPromotionCountdown * 1000"/>
                </button>

              </div>


            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <glFooter :activeTitle="0"></glFooter>
    </template>
  </page-scroll>
</template>
<script>
import AssetsCard from "@/views/invest/components/AssetsCard.vue";
import common from "@/utils/common";
import InvestCompute from "@/views/invest/components/InvestCompute.vue";

export default {
  components: {AssetsCard, InvestCompute},
  data() {
    return {
      title: this.$t('new.doc39'),
      dataList: [],
      defaultBanner: require('@/assets/images/invest/item-head-bg.png'),
      assetsInfo: {},
      info: {},
      balance: 0,
      text: ''
    };
  },

  mounted() {
    this.getList()
    this.getInfo()

  },


  methods: {

    async getList() {
      let res = await this.$post(this.URL.financial.prolist)
      if (res.code != 0) return this.$toast(res.message);
      res.data.forEach(item => {
        item.rate = common.accMul(item.rate, 100)
      })
      this.dataList = res.data
    },
    async getInfo() {
      let res = await this.$post(this.URL.income.financial)
      if (res.code != 0) return this.$toast(res.message);
      this.assetsInfo = res.data
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>


<style lang="less" scoped>
/deep/ .head {
  background: linear-gradient(180deg, rgba(2,5,6,1) 0%, rgba(18,49,44,1) 100%);
}

.page {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.container {
  padding-top: 14px;
  padding-bottom: 1.4rem;
}

.icon-record {
  width: .4rem;
  height: .4rem;
}

.list-box {
  .cname {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: .32rem;
    padding: .24rem 0;

    img {
      width: 60px;
    }
  }

  .list {
    .item {
      border-radius: .24rem;
      background: #231417;
      overflow: hidden;

      &:nth-of-type(n+2) {
        margin-top: .24rem;
      }


      .head {
        position: relative;
        height: 88px;

        img {
          width: 100%;
          height: 88px;
        }

        .head-content {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0, -50%);
          padding: 0 .32rem;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            color: #FFF;
            font-size: .28rem;
          }

          .buy-btn {
            border-radius: 1.8rem;
            background: linear-gradient(180deg, rgba(219, 213, 118, 1) 0%, rgba(217, 127, 7, 1) 100%);
            color: #000;
            font-size: .24rem;
            font-weight: 600;
            padding: .14rem .24rem;
          }
        }
      }

      .info-list {
        padding: .32rem;

        .info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:nth-of-type(n+2) {
            margin-top: .24rem;
          }

          .name {
            color: #BDBDBD;
            font-size: .26rem;
          }

          .value {
            color: #FFF;
            font-size: .26rem;
          }

          .active {
            color: #ffff00;
          }
        }
      }

    }


  }
}

.but {

  margin: 0 .32rem .32rem .32rem;

  button {
    border-radius: 1.8rem;
    background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
    color: #FFF;
    font-size: 0.28rem;
    padding: 0.24rem 0;
    border: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-count-down {
      color: #fff;
      font-size: .28rem;
    }
  }
}
</style>
